<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>div+Css布局</title>
		<style>
			/**内部Css样式**/
		</style>
		<!-- 引入外部的css样式文件        -->
		<link rel="stylesheet" href="css/layout_base.css" />
	</head>

	<body>
		<form action="#" method="get">
			<!--主区域--->
			<div id="main">
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>用户名:</span>
					</div>
					<div class="column">
						<input type="text" id="userName" name="userName" value="admin" />
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>密码:</span>
					</div>
					<div class="column">
						<input type="password" id="userPsw" name="userPsw" />
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>邮箱:</span>
					</div>
					<div class="column">
						<input type="email" id="userEmail" name="userEmail" />
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>性别:</span>
					</div>
					<div class="column">
						<!--单选框如果具有互斥性：要求改组单选框的控件的name属性保持一致； -->
						<input type="radio" id="userSex1" checked="checked" name="userSex" />女
						<input type="radio" id="userSex2" name="userSex" />男
						<input type="radio" id="userSex3" name="userSex" />性别不限
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>兴趣爱好:</span>
					</div>
					<div class="column">
						<!--要求：同一组的多选框的name属性要保持一致；-->
						<input type="checkbox" checked="checked" id="userHobby1" name="userHobby" />学习
						<input type="checkbox" id="userHobby2" name="userHobby" />王者荣耀
						<input type="checkbox" id="userHobby3" name="userHobby" />旅游
						<input type="checkbox" id="userHobby4" name="userHobby" />编程
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>专业:</span>
					</div>
					<div class="column">
						<select id="userMajor" name="userMajor" style="width: 80px;">
							<option></option>
							<option value="cs" selected="selected">计算机</option>
							<option value="jx">机械</option>
							<option value="fc">金融</option>
						</select>
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span>照片:</span>
					</div>
					<div class="column">
						<input type="file" id="userImg" name="userImg" />
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine" style="height: 400px;">
					<!---列1--->
					<div class="column" style="padding-top: 70px;">
						<span>自我介绍:</span>
					</div>
					<div class="column">
						<textarea id="userInfo" name="userInfo" rows="10" cols="30"></textarea>
					</div>
				</div>
				<!---rowline--->
				<div class="rowLine">
					<!---列1--->
					<div class="column">
						<span><input type="submit" value="提交信息" /></span>
					</div>
					<div class="column">
						<input type="reset" value="重置" />
					</div>
				</div>
			</div>
			<!--主区域 结束--->
		</form>
	</body>

</html>